'use strict';

/* 登录页 */

var React = require('react-native');

var {
	StyleSheet,
	Text,
	TextInput,
	View,
	ScrollView,
	TouchableOpacity,
	ToastAndroid,
	ToolbarAndroid
} = React;



module.exports = React.createClass({

	propTypes: {
		navigator: React.PropTypes.object.isRequired
	},

	getInitialState: function() {
		return {
			username: null,
			password: null,
		}
	},

	render: function() {
		return (
			<ScrollView contentContainerStyle={styles.container}>
				<View style={styles.toolbarContainer}>
					<ToolbarAndroid title="登录" 
						style={styles.toolbar}
						navIcon={{uri:'ic_action_goback'}}
						onIconClicked={this.goback}>
					</ToolbarAndroid>
				</View>
		        <View style={styles.form}>
		        	<View style={styles.usernameWrapper}>
		        		<TextInput style={styles.username} 
		        			onChangeText= {this.usernameChangeHandler}
		        			keyboardType ="ascii-capable"
		        			placeholder="账号"/>
		        	</View>
		        	<View style={styles.passwordWrapper}>
		        		<TextInput style={styles.password} 
		        			onChangeText= {this.passwordChangeHandler}
		        			keyboardType ="ascii-capable"
		        			secureTextEntry={true}
		        			placeholder="密码"/>
		        	</View>
		        </View>
		        <View style={styles.loginButtonView}>
		        	<TouchableOpacity onPress={this.login}
		        		style={styles.loginButton}>
		        		<Text style={styles.loginButtonText}>登录</Text>
		        	</TouchableOpacity>
		        </View>	
			</ScrollView>
		);
	},
	goback: function() {
		//ToastAndroid.show('goback', ToastAndroid.SHORT);
		this.props.navigator.pop();
	},
	usernameChangeHandler: function(text) {
		this.setState({
			username: text
		})
	},
	passwordChangeHandler: function(text) {
		this.setState({
			password: text
		})
	},
	login: function() {
		if (isEmpty(this.state.username)) {
			ToastAndroid.show('账号不能为空', ToastAndroid.LONG);
			return;
		}
		if (isEmpty(this.state.password)) {
			ToastAndroid.show('密码不能为空', ToastAndroid.LONG);
			return;
		}
		ToastAndroid.show('登录中...', ToastAndroid.LONG);
	}
});

function isEmpty(text) {
	if (text == null) return true;
	text = text.trim();
	return text == '';
}

var styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#EEE',
	},

	toolbarContainer: {
		flexDirection: 'row',
		height: 55,
		backgroundColor: '#FFF',
		borderBottomWidth: 1,
		borderColor: '#DDD',
	},
	toolbar: {
		flex: 1,
	},

	form: {
		marginTop: 15,
		backgroundColor: '#FFF',
	},
	usernameWrapper: {
		borderColor: '#DDD',
		borderTopWidth: 1,
		borderBottomWidth: 1,
		paddingHorizontal: 15,
	},
	username: {
		backgroundColor: 'transparent',
		fontSize: 18,
		padding: 5,
	},
	passwordWrapper: {
		borderColor: '#DDD',
		borderBottomWidth: 1,
		paddingHorizontal: 15,
	},
	password: {
		backgroundColor: 'transparent',
		fontSize: 18,
		padding: 5,
	},
	loginButtonView: {
		marginTop: 15,
		flexDirection: 'row',
		justifyContent: 'center',
	},
	loginButton: {
		width: 250,
		height: 45,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: '#4169E1',
		borderRadius: 5,
	},
	loginButtonText: {
		color: '#FFF',
		fontSize: 24,
	}
});